<template>
    <!-- 更改分类 -->
    <el-dialog
        class="change-category__wrap"
        title="更改类目"
        width="50%" center
        :before-close="close"
        :visible.sync="dialogVisible">
        <div class="px-8">
            <div class="flex items-center mb-4" v-for="(item, ind) in categorys" :key="ind">
                <!-- 级联选框 -->
                <el-cascader
                    class="mr-4 mb-4 w-full"
                    v-model="categorys[ind]"
                    :options="typeOptions"
                    placeholder="请选择类目"
                    :show-all-levels="false"
                    :props="{value: 'id', label: 'text', children: 'nodes'}">
                </el-cascader>

                <!-- 删除 ✖ -->
                <i class="el-icon-close mb-4" @click="categorys.splice(ind, 1)"></i>
            </div>

            <div style="color: #02A7FB; cursor: pointer" class="text-center" @click="categorys.push([])">+添加</div>
        </div>
    </el-dialog>
</template>

<script>
    import {Dialog, Cascader} from 'element-ui';
    import {getCategorise} from '../../config/Cache';

    export default {
        components: {
            ElDialog: Dialog,
            ElCascader: Cascader,
        },
        data() {
            return {
                id: null,
                categorys: [],
                dialogVisible: false,
                typeOptions: [],
                options: null
            };
        },
        methods: {
            open(id, data) {
                this.id = id;
                this.categorys = data.map(el => this.findCategoryArray(el.catId));
                this.dialogVisible = true;
            },
            async fetchCategory() {
                const categories = await getCategorise('cascader');
                this.typeOptions = categories.map(el => {
                    if (!el.nodes) el.disabled = true;
                    return el;
                });
                this.options = await getCategorise();
            },
            findCategoryArray(sourceId) {
                const options = this.options;
                let arr = [];
                let isFinish = true;
                let id = sourceId;

                while (isFinish) {
                    const element = options.find(el => el.id === id);
                    if (element) {
                        arr.unshift(element.id);
                        if (element.parentid) {
                            id = element.parentid;
                        } else {
                            isFinish = false;
                        }
                    } else {
                        isFinish = false;
                    }
                }
                return arr;
            },
            updateCategory() {
                let data = {
                    catIds: this.categorys.map(el => el[el.length - 1]).join(','),
                    catNames: this.categorys.map(el => this.findName(el)).join(',')
                };

                API.put('manage/applications/' + this.id, data)
                    .then(res => {
                        this.$emit('input', true);
                        Ele.$message.success('修改成功');
                    })
                    .catch(err => {
                        Ele.$message.error('修改失败');
                    })
                    .finally(() => {
                        this.dialogVisible = false;
                    });
            },
            findName(array) {
                return this.options.find(el => el.id === array[array.length - 1]).text;
            },
            close() {
                this.updateCategory();
            },
        },
        created() {
            this.fetchCategory();
        }
    }
</script>

<style lang="scss">
    .change-category__wrap {
        .el-icon-close {
            cursor: pointer;

            &:hover {
                color: #02A7FB;
            }
        }
    }
</style>
